<template>
  <!-- 侧边导航栏显示配置进度 -->
  <div class="stepbar-view">
    <div
      v-for="(item, index) in stepList"
      :key="index"
      class="stepbar-view-main"
    >
      <div class="view-main-title" @click="selectTitlemes(item)">
        <div
          class="title-lineone"
          :class="
            item.navindex === nowNavindex
              ? 'view-main-value-line-active'
              : ''
          "
        >
          {{ item.typename }}
        </div>
      </div>
      <div v-if="item.isshowChild" class="view-main-value">
        <!-- :class="itemtwo.stepid === nowstepid? 'view-main-value-line-active':''" -->
        <div
          v-for="(itemtwo, indextwo) in item.child"
          :key="'two' + indextwo"
          class="view-main-value-line"
          @click="slectedStep(itemtwo.stepid)"
        >
          {{ itemtwo.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "LeftStepBar",
  data() {
    return {
      stepList: [
        {
          typename: "页眉页脚配置",
          isshowChild: false,
          navindex: -1
          // child: [{ name: "页眉页脚模板", stepid: 1 }]
        }
        // {
        //   typename: "基地概览", isshowChild: true,
        //   child: [
        //     { name: "设施信息", stepid: 2 },
        //     { name: "页脚配置", stepid: 3 }
        //   ]
        // }
      ],
      nowNavindex: -1,
      nowstepid: 1,
      // 未处理的导航栏信息
      templateNavigationVOList: []
    };
  },
  mounted() {
    this.gettemplemes();
  },
  methods: {
    // 导航栏标题选择
    selectTitlemes(e) {
      this.nowNavindex = e.navindex;
      this.$emit("getnavindex", e.navindex);
    },
    // 子信息选择
    slectedStep(i) {
      this.nowstepid = i;
      // this.$emit('getstep', i)
    },
    // 获取侧边栏选中的导航栏
    gettemplemes() {
      this.stepList = []
      let query = this.$route.query;
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/template/queryTemplateInfo";
      if (query.templateCode) {
        axios({
          method: "GET",
          url: requrl + "?templateCode=" + query.templateCode
        }).then((response) => {
          let mes = response.data.data;
          if (mes) {
            // console.log(mes)
            this.templemessage = mes;
            this.topscreentitle = mes.templateName;
            this.templateNavigationVOList = mes.templateNavigationVOList || [];
            if (this.templateNavigationVOList[0]) {
              this.templateNavigationVOList.forEach((item, index) => {
                let stepmes = {
                  typename: item.navigationName,
                  isshowChild: false,
                  navindex: index
                };
                this.stepList.push(stepmes);
              });
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.stepbar-view {
  width: 184px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .stepbar-view-main {
    width: 184px;
    .view-main-title {
      width: 184px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      background-color: #00171c;
      border: #003641 1px solid;
      cursor: pointer;
      .title-lineone {
        height: 40px;
        background: #00171c;
        margin-left: 10px;
      }
    }
    .view-main-value {
      width: 184px;
      // height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      .view-main-value-line {
        border: #003641 1px solid;
        cursor: pointer;
      }
      .view-main-value-line:hover {
        color: #24a8ad;
      }
    }
  }
  .view-main-value-line-active {
    color: #24a8ad;
  }
}
</style>
